<template>
	<view class="container">
		<view class="container-vertical">
			<!-- 图片轮播区域 -->
			<swiper class="swiper" :indicator-dots="true" :autoplay="false" :circular="true">
				<swiper-item v-for="(item, index) in imageList" :key="index">
					<image :src="item" mode="aspectFill" class="swiper-image" @tap="previewImage(index)" />
				</swiper-item>
			</swiper>

			<!-- 两列布局 -->
			<view class="two-column-container" style="margin-top: 20rpx;">
				<view class="column">
					<text class="text-large">租金:{{publishData.rentMoney}}</text>
					<text class="text-small">转让费:{{publishData.transferMoney}}</text>
				</view>
				<view class="column">
					<text class="text-large">{{publishData.area}}㎡</text>
					<text class="text-small">面积</text>
				</view>
			</view>

			<!-- 三行标题内容布局 -->
			<view class="content-container">
				<view class="content-row">
					<text class="content-title">位置</text>
					<text class="content-text">({{publishData.provinceName}}-{{publishData.cityName}}-{{publishData.districtName}}){{publishData.address}}</text>
				</view>
				<view class="content-row">
					<text class="content-title">状态</text>
					<text class="content-text">{{publishData.houseState}}</text>
				</view>
				<view class="content-row">
					<text class="content-title">支付</text>
					<text class="content-text">{{publishData.pageMode}}</text>
				</view>
				<view class="content-row">
					<text class="content-title">租期</text>
					<text class="content-text">{{publishData.rentTime}}</text>
				</view>
				<view class="content-row">
					<text class="content-title">联系方式</text>
					<text class="content-text">{{publishData.phone}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import configs from '../../../utils/config'
	export default {
		data() {
			return {
				imageList: [],
				publishId: "",
				publishData: {},
				baseImageUrl: ""
			}
		},
		onLoad(option) {
			this.baseImageUrl = configs.IMAGE_URL;
			this.publishId = option.publishId;
			this.getPublish();
		},
		methods: {
			getImageUrl(imageUrl) {
				return this.baseImageUrl + imageUrl
			},
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.imageList
				})
			},
			getPublish() {
				let that = this
				that.imageList = [];
				uniCloud.callFunction({
					name: 'page-main',
					data: {
						dataType: "queryBy",
						publishId: this.publishId
					},
					success(res) {
						that.publishData = res.result.list[0]
						var tempImageList = that.publishData.publishImage.split(',');
						for (var i = 0; i < tempImageList.length; i++) {
							that.imageList.push(that.getImageUrl(tempImageList[i]))
						}
					},
					fail() {

					}
				})
			},
		}
	}
</script>

<style>
	.container {
		width: 100%;
	}

	.container-vertical {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.swiper {
		width: 100%;
		height: 400rpx;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.two-column-container {
		width: 100%;
		display: flex;
		flex-direction: row;
	}

	.column {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-large {
		color: #ff0000;
		font-size: 44rpx;
		text-align: center;
	}

	.text-small {
		color: #000000;
		font-size: 22rpx;
		text-align: center;
	}

	.content-container {
		width: 100%;
		padding: 20rpx;
	}

	.content-row {
		display: flex;
		flex-direction: row;
		margin-bottom: 20rpx;
	}

	.content-title {
		width: 130rpx;
		text-align: left;
		padding: 10rpx;
		color: #999999;
	}

	.content-text {
		flex: 1;
		text-align: left;
		padding: 10rpx;
	}
</style>